<template>
    <div class="admin-home-index-content">
        <div class="content">
            <div class="topInfoOverview">
                <div class="topLeft">
                    <div class="topContent">
                        <div class="item uniteStyle" v-for="(item, index) in topMenus.menusOne" :key="index">
                            <div class="iconBox" :style="`background-color:${item.bk}`">
                                <lay-icon :type="item.icon.name" :size="item.icon.size" :color="item.icon.color">
                                </lay-icon>
                            </div>
                            <div class="rightBox">
                                <div class="valuesAmount">
                                    <countTo :decimals='2' :endVal="item.value" :duration='2000'></countTo> <div class="floatUnit" v-if="item.floatUnit">{{ item.floatUnit }}</div>
                                </div>
                                <div class="title">
                                    {{ item.title }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="topContent">
                        <div class="item uniteStyle" v-for="(item, index) in topMenus.menusTwo" :key="index">
                            <div class="iconBox" :style="`background-color:${item.bk}`">
                                <lay-icon :type="item.icon.name" :size="item.icon.size" :color="item.icon.color">
                                </lay-icon>
                            </div>
                            <div class="rightBox">
                                <div class="valuesAmount">
                                    <countTo :endVal="item.value" :duration='2000'></countTo> <div class="floatUnit" v-if="item.floatUnit">{{ item.floatUnit }}</div>
                                </div>
                                <div class="title">
                                    {{ item.title }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="topRight uniteStyle">
                    <div class="title">
                        今日订单交易量
                    </div>
                    <div class="list">
                        <div class="it" v-for="(item, index) in [...topMenus.menusOne, ...topMenus.menusTwo]" :key="index">
                            <div class="iconBox">
                                <lay-icon :type="item.icon.name" size="18px" :color="item.icon.color">
                                </lay-icon>
                                <div class="left_title">{{ item.list.title }}</div>
                            </div>
                            <div class="progressBox">
                                <lay-progress :percent="item.list.progress" :color="item.icon.color"></lay-progress>
                            </div>
                            <div class="numText">
                                {{ item.list.num_text }}/{{ item.unit }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="middleOverview">
                <div class="leftChartBox">
                    <div class="titleName">
                        数据总览
                    </div>
                    <div class="chartBox">
                        <div class="leftColumnar chartStyleBox" id="leftColumnar1"></div>
                        <div class="leftColumnar chartStyleBox" id="leftColumnar2"></div>
                        <div class="rightRound chartStyleBox">
                            <div class="chart_tips">
                                <div class="item" v-for="(it,i) in echartsPieMenus" :key="i">
                                    <div class="bar" :style="`background-color:${it.itemStyle.color}`"></div>
                                    <div class="bar_text">{{ it.name }}</div>
                                </div>
                            </div>
                            <div class="round" id="rightRound"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bottomOverview">
                <div class="leftBox uniteStyle">
                    <div class="titleName">
                        最近订单列表
                    </div>
                    <div class="table" >
                        <lay-skeleton :rows="10" :loading="loading" animated>
                            <div class="item th_item">
                                <div class="th td_style td_style1" title="创建时间">
                                    创建时间
                                </div>
                                <div class="th td_style td_style2" title="商户名称">
                                    商户名称
                                </div>
                                <div class="th td_style td_style3" title="商品名称">
                                    商品名称
                                </div>
                                <div class="th td_style td_style4" title="交易金额">
                                    交易金额
                                </div>
                                <div class="th td_style td_style5" title="交易状态">
                                    交易状态
                                </div>
                            </div>
                            <div class="item"  v-for="(item, index) in lastOrderList" :key="index">
                                <div class="td td_style td_style1">
                                    {{ item.create_date_format }}
                                </div>
                                <div class="td td_style td_style2" :title="item.platform_store_name">
                                    {{ item.platform_store_name }}
                                </div>
                                <div class="td td_style td_style3" :title="item.platform_product_name">
                                    {{ item.platform_product_name }}
                                </div>
                                <div class="td td_style td_style4">
                                    {{ item.order_real_all_money_yuan }}元
                                </div>
                                <div 
                                    class="td td_style td_style5" 
                                    :title="enumConverter.rider_order_status_valuetotext[item.order_status]"
                                >
                                    {{ enumConverter.rider_order_status_valuetotext[item.order_status] }}
                                </div>
                            </div>
                        </lay-skeleton>
                    </div>
                </div>
                <div class="rightBox uniteStyle">
                    
                </div>
            </div>

        </div>
    </div>
</template>

<script src="./admin-home-index.js"></script>

<style lang="stylus" scoped>
@import './admin-home-index.styl';
</style>
